<template>
    <div class="mainanBox">
      <slot class="slotbox"></slot>
      <i class="border border-top-left"></i>
      <i class="border border-top-right"></i>
      <i class="border border-bottom-left"></i>
      <i class="border border-bottom-right"></i>
    </div>
</template>

<script>
export default {

}
</script>

<style lang='scss' scoped>
  .mainanBox{
    width: 100%;
    height: calc(100% - 1.84rem);
    background: rgba(0,37,58,0.64);
    border-top: 0.01rem solid #31BAC2;
    border-bottom: 0.01rem solid #31BAC2;
    position: relative;
    padding: .64rem;
    box-sizing: border-box;
    .slotbox{
      font-size: 0.4rem;
    }
    .border {
        position: absolute;
        width: .3rem;
        height: .3rem;
        &.border-top-left {
            top: -0.02rem;
            left: -0.02rem;
            border-top: 0.02rem solid #31BAC2;
            border-left: 0.02rem solid #31BAC2;
        }
        &.border-top-right {
            top: -0.02rem;
            right: -0.02rem;
            border-top: 0.02rem solid #31BAC2;
            border-right: 0.02rem solid #31BAC2;
        }
        &.border-bottom-left {
            bottom: -0.02rem;
            left: -0.02rem;
            border-bottom: 0.02rem solid #31BAC2;
            border-left: 0.02rem solid #31BAC2;
        }
        &.border-bottom-right {
            bottom: -0.02rem;
            right: -0.02rem;
            border-bottom: 0.02rem solid #31BAC2;
            border-right: 0.02rem solid #31BAC2;
        }
    }
  }
</style>